<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wechat - Home</title>
    <!-- 引入样式表 -->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/container.css">
    <link rel="stylesheet" href="css/phone-title.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/wrap-add-friend.css">
    <link rel="stylesheet" href="css/wrap-chat.css">
    <link rel="stylesheet" href="css/wrap-discovery.css">
    <link rel="stylesheet" href="css/wrap-me.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/header-menu.css">
    <link rel="stylesheet" href="css/moments.css">
    <script src="jquery/jquery.js"></script>
    <script src="js/menu-bottom.js"></script>
    <script src="js/menu-header-popup.js"></script>
    <script src="js/moments.js"></script>
    <script src="js/wrapme.js"></script>
</head>

<body>
<div id="container">
    <!-- 信号、时间、电池 -->
    <div id="phone-title">
        <!-- 信号 -->
        <div id="phone-title-left">
            <div class="signal"></div>
            <div class="signal"></div>
            <div class="signal"></div>
            <div class="signal"></div>
            <div class="no-signal"></div>
            <div>中国移动&nbsp;4G</div>
        </div>
        <!-- 时间 -->
        <div id="phone-title-center">12:00</div>
        <!-- 电池 -->
        <div id="phone-title-right">
            <div>78%</div>
            <div>
                <!--   电池壳 -->
                <div></div> <!-- 电量 -->
            </div>
            <div></div> <!-- 正极 -->
        </div>
    </div>
    <!-- 返回、信息条数 -->
    <div id="header" class="header-font">
        <!-- 返回 -->
        <div id="header-control">
            <div></div>
            <div>返回</div>
        </div>
        <div id="msg">微信(10)</div>
        <!-- 加号 -->
        <div id="function">
            <!-- 符号 -->
            <div id="add"></div>
            <!-- 弹出菜单 -->
            <div id="popup-menu">
                <!-- 向上箭头 -->
                <div id="small-triangle-up">

                </div>
                <!-- 菜单内容 -->
                <div class="popup-menu-content">
                    <!-- 前面图后面文字 -->
                    <div class="popup-menu-content-icon">
                        <img src="img/icon/control/发起群聊.svg" alt="">
                    </div>
                    <div>
                        发起群聊
                    </div>
                </div>
                <div class="popup-menu-content">
                    <!-- 前面图后面文字 -->
                    <div class="popup-menu-content-icon">
                        <img src="img/icon/control/添加朋友.svg" alt="">
                    </div>
                    <div>
                        添加朋友
                    </div>
                </div>
                <div class="popup-menu-content">
                    <!-- 前面图后面文字 -->
                    <div class="popup-menu-content-icon">
                        <img src="img/icon/control/扫一扫.svg" alt="">
                    </div>
                    <div>
                        扫一扫
                    </div>
                </div>
                <div class="popup-menu-content">
                    <!-- 前面图后面文字 -->
                    <div class="popup-menu-content-icon">
                        <img src="img/icon/control/收付款.svg" alt="">
                    </div>
                    <div>
                        收付款
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 四个区域 ,微信，通讯录，发现，我 -->
    <div id="wrap-chat">
        <div id="search"><input type="text"></div>
        <!-- 对话框 -->
        <div id="lists">
            <!-- 用户 -->
            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/佐菲.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">佐菲</div>
                    <div class="text-radio">[语音]</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/赛文.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">赛文</div>
                    <div class="text">我是你爹</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/杰克.jpg" alt="">
                    <div class="new-msg">10</div>
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">杰克</div>
                    <div class="text">来搓麻将</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:30</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/泰罗 (2).jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">泰罗</div>
                    <div class="text">你看我头像牛逼不</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/迪迦.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">迪迦</div>
                    <div class="text">你能有我白</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/戴拿.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">戴拿</div>
                    <div class="text">撸铁去</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/盖亚.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">盖亚</div>
                    <div class="text">信不信给你来个断头台</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/诺亚.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">诺亚</div>
                    <div class="text">上号</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/尤利安.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">尤利安</div>
                    <div class="text">给你一大嘴巴子</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

            <div class="content">
                <div class="content-left">
                    <img src="./img/photo/露迪娅.jpeg" alt="">
                </div>
                <!-- 中间用户名和聊天信息 -->
                <div class="content-center">
                    <div class="username">露迪娅</div>
                    <div class="text">.....</div>
                </div>
                <!-- 右侧时间  -->
                <div class="content-right">9:33</div>
            </div>

        </div>
    </div>
    <div id="wrap-add-friend">
        <div class="aside">
            <div><a href="#↑">↑</a></div>
            <div><a href="#☆">☆</a></div>
            <div><a href="#A">A</a></div>
            <div><a href="#B">B</a></div>
            <div><a href="#C">C</a></div>
            <div><a href="#D">D</a></div>
            <div><a href="#E">E</a></div>
            <div><a href="#F">F</a></div>
            <div><a href="#G">G</a></div>
            <div><a href="#H">H</a></div>
            <div><a href="#I">I</a></div>
            <div><a href="#J">J</a></div>
            <div><a href="#K">K</a></div>
            <div><a href="#L">L</a></div>
            <div><a href="#M">M</a></div>
            <div><a href="#N">N</a></div>
            <div><a href="#O">O</a></div>
            <div><a href="#P">P</a></div>
            <div><a href="#Q">Q</a></div>
            <div><a href="#R">R</a></div>
            <div><a href="#S">S</a></div>
            <div><a href="#T">T</a></div>
            <div><a href="#U">U</a></div>
            <div><a href="#V">V</a></div>
            <div><a href="#W">W</a></div>
            <div><a href="#X">X</a></div>
            <div><a href="#Y">Y</a></div>
            <div><a href="#Z">Z</a></div>
            <div><a href="##">#</a></div>
        </div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/icon/dicovery/新的朋友.jpg" alt="">
                </div>
                <div class="group-item-center">新的朋友</div>
            </div>
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/icon/dicovery/仅聊天的朋友.jpg" alt="">
                </div>
                <div class="group-item-center">仅聊天</div>
            </div>
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/icon/dicovery/群聊.jpg" alt="">
                </div>
                <div class="group-item-center">群聊</div>
            </div>
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/icon/dicovery/标签.jpg" alt="">
                </div>
                <div class="group-item-center">标签</div>
            </div>
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/icon/dicovery/公众号.jpg" alt="">
                </div>
                <div class="group-item-center">公众号</div>
            </div>
        </div>
        <div id="my-city-friend" class="anchor" style="font-size:11px;">我的企业及企业联系人</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/icon/dicovery/企业微信联系人.jpg" alt="">
                </div>
                <div class="group-item-center">企业微信联系人</div>
            </div>
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/icon/dicovery/大学.svg" alt="">
                </div>
                <div class="group-item-center">M78工业大学</div>
            </div>
        </div>

        <!-- A -->
        <div id="A" class="anchor" style="font-size:11px;">A</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/艾斯.jpeg" alt="">
                </div>
                <div class="group-item-center">艾斯</div>
            </div>
        </div>

        <!-- B -->
        <div id="B" class="anchor" style="font-size:11px;">B</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/贝斯.jpg" alt="">
                </div>
                <div class="group-item-center">贝斯</div>
            </div>
        </div>

        <!-- C -->
        <div id="C" class="anchor">C</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/高斯.jpeg" alt="">
                </div>
                <div class="group-item-center">Cosmos</div>
            </div>

        </div>

        <!-- D -->
        <div id="D" class="anchor">D</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/迪迦.jpeg" alt="">
                </div>
                <div class="group-item-center">迪迦</div>
            </div>
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/戴拿.jpeg" alt="">
                </div>
                <div class="group-item-center">戴拿</div>
            </div>
        </div>

        <!-- E -->
        <div id="E" class="anchor">E</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/eighty.jpeg" alt="">
                </div>
                <div class="group-item-center">Eighty</div>
            </div>
        </div>

        <!-- F -->
        <div id="F" class="anchor">F</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Fuma.jpeg" alt="">
                </div>
                <div class="group-item-center">Fuma</div>
            </div>
        </div>

        <!-- G -->
        <div id="G" class="anchor">G</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/盖亚.jpeg" alt="">
                </div>
                <div class="group-item-center">盖亚</div>
            </div>
        </div>

        <!-- H -->
        <div id="H" class="anchor">H</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Hakari.jpeg" alt="">
                </div>
                <div class="group-item-center">Hakari</div>
            </div>
        </div>

        <!-- I -->
        <div id="I" class="anchor">I</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Ine.jpeg" alt="">
                </div>
                <div class="group-item-center">Ine</div>
            </div>
        </div>

        <!-- J -->
        <div id="J" class="anchor">J</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/杰克.jpg" alt="">
                </div>
                <div class="group-item-center">杰克</div>
            </div>
        </div>

        <!-- K -->
        <div id="K" class="anchor">K</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Ken.jpeg" alt="">
                </div>
                <div class="group-item-center">Ken</div>
            </div>
        </div>

        <!-- L -->
        <div id="L" class="anchor">L</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/露迪娅.jpeg" alt="">
                </div>
                <div class="group-item-center">露迪娅</div>
            </div>
        </div>

        <!-- M -->
        <div id="M" class="anchor">M</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/梦比优斯.jpeg" alt="">
                </div>
                <div class="group-item-center">梦比优斯</div>
            </div>
        </div>

        <!-- N -->
        <div id="N" class="anchor">N</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/诺亚.jpeg" alt="">
                </div>
                <div class="group-item-center">诺亚</div>
            </div>
        </div>

        <!-- O -->
        <div id="O" class="anchor">O</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Obu.jpeg" alt="">
                </div>
                <div class="group-item-center">Obu</div>
            </div>
        </div>

        <!-- P -->
        <div id="P" class="anchor">P</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Pn.jpeg" alt="">
                </div>
                <div class="group-item-center">Pn</div>
            </div>
        </div>

        <!-- Q -->
        <div id="Q" class="anchor">Q</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Qai.jpeg" alt="">
                </div>
                <div class="group-item-center">Qai</div>
            </div>
        </div>

        <!-- R -->
        <div id="R" class="anchor">R</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Rions.jpeg" alt="">
                </div>
                <div class="group-item-center">Rions</div>
            </div>
        </div>

        <!-- S -->
        <div id="S" class="anchor">S</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/赛文.jpeg" alt="">
                </div>
                <div class="group-item-center">赛文</div>
            </div>
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/赛罗.jpeg" alt="">
                </div>
                <div class="group-item-center">赛罗</div>
            </div>
        </div>

        <!-- T -->
        <div id="T" class="anchor">T</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/泰罗 (2).jpeg" alt="">
                </div>
                <div class="group-item-center">泰罗</div>
            </div>
        </div>

        <!-- U -->
        <div id="U" class="anchor">U</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Usb.jpeg" alt="">
                </div>
                <div class="group-item-center">Usb</div>
            </div>
        </div>

        <!-- V -->
        <div id="V" class="anchor">V</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Vin.jpeg" alt="">
                </div>
                <div class="group-item-center">Vin</div>
            </div>
        </div>

        <!-- W -->
        <div id="W" class="anchor">W</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Wn.jpeg" alt="">
                </div>
                <div class="group-item-center">Wn</div>
            </div>
        </div>

        <!-- X -->
        <div id="X" class="anchor">X</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/Xou.jpeg" alt="">
                </div>
                <div class="group-item-center">Xou</div>
            </div>
        </div>

        <!-- Y -->
        <div id="Y" class="anchor">Y</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/尤利安.jpeg" alt="">
                </div>
                <div class="group-item-center">尤利安</div>
            </div>
        </div>

        <!-- Z -->
        <div id="Z" class="anchor">Z</div>
        <div class="friend-groups">
            <div class="group-item">
                <div class="group-item-left">
                    <img src="./img/photo/佐菲.jpeg" alt="">
                </div>
                <div class="group-item-center">佐菲</div>
            </div>

        </div>
        <div class="friend-footer">28个朋友</div>
    </div>

    <!-- 发现页面 -->
    <div id="wrap-discovery">
        <!-- 第一组 -->
        <div class="groups">
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/朋友圈.svg" alt="">
                </div>
                <div class="group-item-center">朋友圈</div>
                <div class="group-item-right"></div>
            </div>
        </div>

        <!-- 第二组 -->
        <div class="groups">
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/扫一扫.svg" alt="">
                </div>
                <div class="group-item-center">扫一扫</div>
                <div class="group-item-right"></div>
            </div>
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/摇一摇.svg" alt="">
                </div>
                <div class="group-item-center">摇一摇</div>
                <div class="group-item-right"></div>
            </div>
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/搜一搜.svg" alt="">
                </div>
                <div class="group-item-center">搜一搜</div>
                <div class="group-item-right"></div>
            </div>
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/看一看.svg" alt="">
                </div>
                <div class="group-item-center">看一看</div>
                <div class="group-item-right"></div>
            </div>
        </div>
        <!-- 第三组 -->
        <div class="groups">
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/附近的人.svg" alt="">
                </div>
                <div class="group-item-center">附近的人</div>
                <div class="group-item-right"></div>
            </div>
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/漂流瓶.svg" alt="">
                </div>
                <div class="group-item-center">漂流瓶</div>
                <div class="group-item-right"></div>
            </div>
        </div>
        <!-- 第四组 -->
        <div class="groups">
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/购物.svg" alt="">
                </div>
                <div class="group-item-center">购物</div>
                <div class="group-item-right"></div>
            </div>
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/游戏.svg" alt="">
                </div>
                <div class="group-item-center">游戏</div>
                <div class="group-item-right"></div>
            </div>
        </div>
        <!-- 第五组 -->
        <div class="groups">
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/小程序.svg" alt="">
                </div>
                <div class="group-item-center">朋友圈</div>
                <div class="group-item-right"></div>
            </div>
        </div>
    </div>

    <!-- 我的页面 -->
    <div id="wrap-me">
        <div class="me-header">

            <div class="left">
                <img src="./img/photo/赛罗.jpeg" alt="">
            </div>

            <div class="center">
                <div class="username">赛罗</div>
                <div class="userid">
                    <div class="userid-left">微信号：sailuo-78</div>
                    <div class="userid-right">
                        <img src="./img/icon/dicovery/二维码.jpg" style="width: 20px;height:20px"></div>
                </div>
                <div class="top-zhuangtai">
                    <div class="top-zt">+ 状态</div>
                    <div class="top-dian">···</div>
                </div>
            </div>

            <div class="right"></div>

        </div>
        <div class="groups">
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/服务.jpg" alt="">
                </div>
                <div class="group-item-center">服务</div>
                <div class="group-item-right"></div>
            </div>

        </div>

        <div class="groups">

            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/收藏.jpg" alt="">
                </div>
                <div class="group-item-center">收藏</div>
                <div class="group-item-right"></div>
            </div>

            <div class="group-item" id="momentt">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/朋友圈.jpg" alt="">
                </div>
                <div class="group-item-center">朋友圈</div>
                <div class="group-item-right"></div>
            </div>

            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/视频号.jpg" alt="">
                </div>
                <div class="group-item-center" style="margin-top: 1px;">视频号</div>
                <div class="group-item-right"></div>
            </div>

            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/卡包.jpg" alt="">
                </div>
                <div class="group-item-center" style="margin-top: 1px;">卡包</div>
                <div class="group-item-right"></div>
            </div>

            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/表情.jpg" alt="">
                </div>
                <div class="group-item-center" style="margin-top: 1px;">表情</div>
                <div class="group-item-right"></div>
            </div>
        </div>

        <div class="groups">
            <div class="group-item" id="moment">
                <div class="group-item-left">
                    <img src="img/icon/dicovery/设置.jpg" alt="" style="width: 29px;">
                </div>
                <div class="group-item-center" style="margin-top: 2px;">设置</div>
                <div class="group-item-right"></div>
            </div>
        </div>
    </div>

    <!-- 朋友圈 -->
    <div id="moments">
        <div id="huge-screen">

            <div id="user">
                <div id="username">赛罗</div>
                <div id="user-photo">
                    <img src="./img/photo/赛罗.jpeg" alt="">
                </div>
            </div>
        </div>
        <div id="notification"></div>
        <div id="moments-list">
            <div class="moment-content">

                <!-- 左侧头像 -->
                <div class="moment-content-left">
                    <img src="./img/photo/赛罗.jpeg" alt="">
                </div>

                <!-- 右侧消息区 -->
                <div class="moment-content-right">
                    <div class="moment-content-username">赛罗</div>
                    <div class="moment-content-text">给我来一打怪兽</div>
                    <div class="moment-content-imgs">
                        <div class="user-imgs" data-img="img/images/赛罗1.jpeg"></div>
                    </div>

                    <!-- 回复区容器 -->
                    <div class="moment-function">
                        <!-- 回复区时间 -->
                        <div class="moment-function-time">11分钟前</div>

                        <!-- 右侧弹出层容器-->
                        <div class="moment-function-right">
                            <!-- 弹出层内容 -->
                            <div class="moment-function-control">
                                <div>

                                    <div></div>

                                    <div>赞</div>

                                </div>

                                <div>

                                    <div></div>

                                    <div>评论</div>

                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- 箭头 -->
                    <div id="triangle-up"></div>

                    <!-- 赞和评论容器 -->
                    <div class="comments-board">
                        <!-- 赞区 -->
                        <div class="upvotes">
                            <div class="upvotes-img"></div>
                            <!-- 人名 -->
                            <div class="upvotes-names">
                                <div class="name">泰罗,</div>
                                <div class="name">赛文</div>
                            </div>

                        </div>

                        <!-- 评论区 -->
                        <div class="comments">
                            <div class="comment">
                                <div class="comment-name">赛文:</div>
                                <div class="comment-content">不愧我儿</div>
                            </div>

                            <div class="comment">
                                <div class="comment-name">盖亚:</div>
                                <div class="comment-content">第一次这么想加入怪兽这一队</div>
                            </div>

                            <div class="comment">
                                <div class="comment-name">尤利安:</div>
                                <div class="comment-content">已经给你定好床位了</div>
                            </div>

                            <div class="comment">
                                <div class="comment-name">迪迦:</div>
                                <div class="comment-content">哈哈哈哈哈哈哈哈哈哈哈</div>
                            </div>

                            <div class="comment">
                                <div class="comment-name">杰克:</div>
                                <div class="comment-content">帅的雅痞</div>
                            </div>
                        </div>


                    </div>

                </div>

            </div>

            <div class="moment-content">
                <div class="moment-content-left">
                    <img src="img/photo/迪迦.jpeg">
                </div>
                <div class="moment-content-right">
                    <div class="moment-content-username">迪迦</div>
                    <div class="moment-comtent-text">时间都去哪了~~</div>
                    <div class="moment-content-imgs">
                        <div class="user-imgs" data-img="img/images/1.jpg"></div>
                        <div class="user-imgs" data-img="img/images/2.jpg"></div>
                        <div class="user-imgs" data-img="img/images/3.jpg"></div>
                    </div>
                    <div class="moment-function">
                        <div class="moment-function-time">44分钟前</div>
                        <div class="moment-function-right">
                            <div class="moment-function-control">
                                <div>
                                    <div></div>
                                    <div>赞</div>
                                </div>
                                <div>
                                    <div></div>
                                    <div>评论</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="moment-content">
                <div class="moment-content-left">
                    <img src="img/photo/佐菲.jpeg">
                </div>
                <div class="moment-content-right">
                    <div class="moment-content-username">佐菲</div>
                    <div class="moment-comtent-text">每场20杀，0助攻</div>
                    <div class="moment-content-imgs">
                        <div class="user-imgs" data-img="img/images/佐菲1.jpeg"></div>

                    </div>
                    <div class="moment-function">
                        <div class="moment-function-time">44分钟前</div>
                        <div class="moment-function-right">
                            <div class="moment-function-control">
                                <div>
                                    <div></div>
                                    <div>赞</div>
                                </div>
                                <div>
                                    <div></div>
                                    <div>评论</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- 底部菜单 -->
    <div id="menu">
        <div class="menu-div" data-icon-normal="img/icon/menu/聊天.svg" data-icon-press="img/icon/menu/聊天-press.svg"
             data-target="wrap-chat">
            <div>
                <img class="icon" src="img/icon/menu/聊天-press.svg" style="transform:scale(1.2);">
            </div>
            <div class="font-menu">微信</div>
        </div>
        <!-- 通讯录 -->
        <div class="menu-div" data-icon-normal="img/icon/menu/通讯录.svg"
             data-icon-press="img/icon/menu/通讯录-press.svg"
             data-target="wrap-add-friend">
            <div>
                <img class="icon" src="img/icon/menu/通讯录.svg">
            </div>
            <div class="font-menu">通讯录</div>
        </div>
        <!-- 发现 -->
        <div class="menu-div" data-icon-normal="img/icon/menu/发现.svg" data-icon-press="img/icon/menu/发现-press.svg"
             data-target="wrap-discovery">
            <div>
                <img class="icon" src="img/icon/menu/发现.svg">
            </div>
            <div class="font-menu">发现</div>
        </div>
        <!-- 我 -->
        <div class="menu-div" data-icon-normal="img/icon/menu/me.svg" data-icon-press="img/icon/menu/me-press.svg"
             data-target="wrap-me">
            <div>
                <img class="icon" src="./img/icon/menu/me.svg" alt="" style="transform: scale(.9);">
            </div>

            <div class="font-menu">我</div>
        </div>
    </div>


</div>
</body>

</html>